<nz-breadcrumb style="margin:12px 0;">
    <nz-breadcrumb-item>系统设置</nz-breadcrumb-item>
    <nz-breadcrumb-item>年级管理</nz-breadcrumb-item>
</nz-breadcrumb>
<div style="padding:24px; background: #fff; min-height: 100%;" class="animation-right">
    <button nz-button [nzType]="'primary'" [nzShape]="'circle'" (click)="showModal()">
        <i class="anticon anticon-plus"></i>
    </button>
    <nz-modal [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
        <ng-template #modalTitle>
            <i class="anticon anticon-edit"></i> {{ isViewStateUpdate ? '更新年级' : '新增年级' }}
        </ng-template>
        <ng-template #modalContent>
            <form nz-form [formGroup]="gradeForm" (ngSubmit)="handleOk($event, gradeForm.value)" [nzType]="'horizontal'">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>年级名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('name')" [nzHasFeedback]="true">
                        <nz-input formControlName="name" [nzPlaceHolder]="'年级名称'" [nzSize]="'large'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('required')">请输入年级名称</div>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('maxlength')">年级名称不能超过10个字符</div>
                    </div>
                </div>
            </form>
        </ng-template>
        <ng-template #modalFooter>
            <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">返 回</button>
            <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="handleOk($event, gradeForm.value)" [nzLoading]="isConfirmLoading"
                [disabled]="!gradeForm.valid">{{ isViewStateUpdate ? '更 新' : '提 交' }}</button>
        </ng-template>
    </nz-modal>
    <nz-table #nzTable [nzAjaxData]="gradeList" [nzShowSizeChanger]="true" [nzLoading]="_loading" [nzTotal]="_total" [(nzPageIndex)]="_current"
        (nzPageIndexChange)="getAllGrades()" [(nzPageSize)]="_pageSize" (nzPageSizeChange)="getAllGrades()" [nzShowTotal]="true">
        <thead nz-thead>
            <tr>
                <th nz-th></th>
                <th nz-th>
                    <span>年级名称</span>
                </th>
                <th nz-th>
                    <span>创建日期</span>
                </th>
                <th nz-th>
                    <span>操作</span>
                </th>
            </tr>
        </thead>
        <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let grade of nzTable.data; let i = index;">
                <td nz-td>{{ i + 1 }}</td>
                <td nz-td>{{ grade.name }}</td>
                <td nz-td>{{ grade.createDate | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
                <td nz-td>
                    <button nz-button class="ant-btn" [nzType]="'primary'" (click)="showModal(grade._id)">
                        <i class="anticon anticon-edit"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>